:root {
  --body-background-color: rgb(255, 255, 255);
  --body-color: rgb(33, 37, 41);

  --nav-background-color: rgb(11, 94, 215);
  --nav-color: rgb(255, 255, 255);

  --element-background-color: rgb(255, 255, 255);
  --element-background-image: none;
  --element-border-color: rgb(33, 37, 41);
  --element-color: rgb(33, 37, 41);

  --form-background-color: rgb(255, 255, 255);
  --form-border-color: rgb(33, 37, 41);
  --form-color: rgb(33, 37, 41);
  --form-focus-background-color: rgb(255, 255, 255);
  --form-focus-color: rgb(33, 37, 41);
  --form-focus-shadow-color: rgb(134, 183, 254);
  --form-focus-shadow-outline-color: rgba(13,110,253,.25);
  --form-addon-background-color: rgb(11, 94, 215);
  --form-addon-border-color: rgb(11, 94, 215);
  --form-addon-color: rgb(255, 255, 255);
  --form-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  --font-family: "Roboto", sans-serif;

  --primary-background-color: rgb(11, 94, 215);
  --primary-border-color: rgb(11, 94, 215);
  --primary-color: rgb(255, 255, 255);
  --secondary-background-color: rgb(108, 117, 125);
  --secondary-border-color: rgb(108, 117, 125);
  --secondary-color: rgb(255, 255, 255);

  --table-background-color: rgb(255, 255, 255);
  --table-border-color: rgb(33, 37, 41);
  --table-color: rgb(33, 37, 41);
  --table-background-image: none;
  --table-header-background-color: rgb(11, 94, 215);
  --table-header-color: rgb(255, 255, 255);
  --table-header-background-image: none;

  --accordion-header-background-image: none;
  --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

  --scrollbar-background-color: rgb(255, 255, 255);
  --scrollbar-color: rgb(11, 94, 215);

  --game-menu-item-background-image: none;
  --game-menu-item-background-image-active: none;

  --disabled-background-color: rgb(222, 225, 228);
  --disabled-color: rgb(200, 13, 13);
}

body {
  font-family: var(--font-family);
  background-color: var(--body-background-color);
  color: var(--body-color);
}

.bg-primary {
  background-color: var(--primary-background-color) !important;
  color: var(--primary-color) !important;
}

.unit-box-table, .structure-box-table {
  background-image: var(--table-background-image);
  background-color: var(--table-background-color);
  background-repeat: repeat;
}

.nav-link {
  color: var(--primary-color);
}

.front-element {
  background-image: var(--element-background-image);
  border: 1px solid var(--element-border-color);
  background-repeat: repeat;
}

table, .table {
  background-color: var(--table-background-color);
  color: var(--table-color);
}

.table-bordered {
  border-color: var(--table-border-color);
}

table th.header, .unit-box-table th, .structure-box-table th {
  background-image: var(--table-header-background-image);
  background-color: var(--table-header-background-color);
  color: var(--table-header-color);
  background-repeat: repeat;
}

.unit-box-table td, .structure-box-table td, .unit-box-table th, .structure-box-table th, .unit-box-table tr, structure-box-table tr {
  border: 2px solid var(--table-border-color);
}

.table-game th {
  background-image: var(--table-header-background-image);
  background-color: var(--table-header-background-color);
  background-repeat: repeat;
}

.btn-primary {
  background-color: var(--primary-background-color);
  border-color: var(--primary-border-color);
  color: var(--primary-color);
}

.btn-secondary{  
  background-color: var(--secondary-background-color); 
  border-color: var(--secondary-border-color);
  color: var(--secondary-color);
}

.btn:hover, .btn:focus {
  background-color: var(--secondary-background-color); 
  border-color: var(--secondary-border-color);
  color: var(--secondary-color);
}

.btn.show, .btn-active {
  background-color: var(--secondary-background-color); 
  border-color: var(--secondary-border-color);
  color: var(--secondary-color);
}

.form-select { 
  background-color: var(--form-background-color);
  border-color: var(--form-border-color);
  color: var(--form-color);
  background-image: var(--form-select-caret);
}

select:after {
  color: white !important;
}

.form-control {
  background-color: var(--form-background-color);
  border-color: var(--form-border-color);
  color: var(--form-color)
}

.form-control:focus {
  background-color: var(--form-focus-background-color);
  color: var(--form-focus-color);
  border-color: var(--form-focus-shadow-color);
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--form-focus-shadow-outline-color);
}

.form-select:focus {
  border-color: var(--form-focus-shadow-color);
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--form-focus-shadow-outline-color);
}

select.form-select option[disabled] {
  background-color: var(--disabled-background-color);
  color: var(--disabled-color);
}

.input-group-text, .input-group-text i {
  color: var(--form-addon-color);
  background-color: var(--form-addon-background-color);
  border-color: var(--form-addon-border-color);
}

.input-group-text .btn {
  background-color: var(--primary-background-color);
  border-color: var(--primary-border-color);
  color: var(--primary-color);
}

.sidebar-menu {
  background-image: var(--element-background-image);
  background-repeat: repeat;
}

.accordion, .accordion-body, .accordion-header, .accordion-item {
  border-color: var(--primary-border-color);
}

.accordion-button, .accordion-button:not(.collapsed) {
  background-image: var(--accordion-header-background-image);
  background-color: var(--primary-background-color);
  border-color: var(--primary-border-color);
  color: var(--primary-color); 
}

.accordion-button:not(.collapsed)::after, .accordion-button::after {
  background-image: var(--accordion-btn-icon);
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

hr {
  color: var(--primary-background-color);
  background-color: var(--primary-background-color);
  opacity: 100%;
}

.game-menu-item {
  background-image: var(--game-menu-item-background-image);
  background-color: var(--primary-background-color);
  border-color: var(--primary-border-color);
  color: var(--primary-color);
}

.game-menu-item.active {
  background-image: var(--game-menu-item-background-image-active);
  background-color: var(--secondary-background-color); 
  border-color: var(--secondary-border-color);
  color: var(--secondary-color);
}

* {
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-background-color);
}